<template>
  <view class="fu-action-sheet">
    <fu-popup
      v-model:show="localVisible"
      position="bottom"
      :round="round"
      :close-on-click-overlay="closeOnClickOverlay"
      @click-overlay="onClickOverlay"
    >
      <!-- 标题 -->
      <view 
        v-if="title || description"
        class="fu-action-sheet__header"
      >
        <view class="fu-action-sheet__close" @click="onClose">
          <fu-icon name="closeempty"></fu-icon>
        </view>
        <view 
          v-if="title"
          class="fu-action-sheet__title"
        >{{ title }}</view>
        <view 
          v-if="description"
          class="fu-action-sheet__description"
        >{{ description }}</view>
      </view>
      
      <!-- 选项列表 -->
      <view 
        v-if="$slots.default"
        class="fu-action-sheet__content"
      >
        <slot></slot>
      </view>
      <view 
        v-else
        class="fu-action-sheet__content"
      >
        <view
          v-for="(item, index) in actions"
          :key="index"
          class="fu-action-sheet__item"
          :class="{
            'fu-action-sheet__item--disabled': item.disabled,
            'fu-action-sheet__item--loading': item.loading
          }"
          :style="{ color: item.color }"
          @click="onSelect(item, index)"
        >
          <text v-if="item.loading" class="fu-action-sheet__loading"></text>
          <text>{{ item.name }}</text>
          <text 
            v-if="item.subname"
            class="fu-action-sheet__subname"
          >{{ item.subname }}</text>
        </view>
      </view>
      
      <!-- 取消按钮 -->
      <view 
        v-if="cancelText && !$slots.default"
        class="fu-action-sheet__gap"
      />
      <view
        v-if="cancelText && !$slots.default"
        class="fu-action-sheet__cancel"
        @click="onCancel"
      >{{ cancelText }}</view>
    </fu-popup>
  </view>
</template>

<script>
/**
 * fu-action-sheet 动作面板组件
 * @description 底部弹起的动作面板，支持自定义内容
 * @property {Boolean} show - 是否显示动作面板
 * @property {Array} actions - 面板选项列表
 * @property {String} title - 面板标题
 * @property {String} description - 选项上方的描述信息
 * @property {String} cancelText - 取消按钮文字，不设置则不显示
 * @property {Boolean} round - 是否显示圆角
 * @property {Boolean} closeOnClickOverlay - 是否在点击遮罩层后关闭
 * @event {Function} select - 选中选项时触发
 * @event {Function} cancel - 点击取消按钮时触发
 * @event {Function} close - 关闭面板时触发
 * @event {Function} click-overlay - 点击遮罩层时触发
 */
export default {
  name: 'fu-action-sheet',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    actions: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    round: {
      type: Boolean,
      default: true
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:show', 'select', 'cancel', 'close', 'click-overlay'],
  data() {
    return {
      localVisible: false
    }
  },
  watch: {
    show: {
      handler(val) {
        this.localVisible = val
      },
      immediate: true
    },
    localVisible(val) {
      this.$emit('update:show', val)
    }
  },
  methods: {
    onSelect(item, index) {
      if (!item.disabled && !item.loading) {
        this.$emit('select', item, index)
        
        if (item.callback) {
          item.callback(item)
        }
        
        this.onClose()
      }
    },
    onCancel() {
      this.$emit('cancel')
      this.onClose()
    },
    onClose() {
      this.localVisible = false
      this.$emit('close')
    },
    onClickOverlay() {
      this.$emit('click-overlay')
      if (this.closeOnClickOverlay) {
        this.onClose()
      }
    },
    showSheet() {
      if (this.showing) return
      this.showing = true
      setTimeout(() => {
        this.visible = true
        this.$emit('open')
      }, 50)
    },
    hideSheet() {
      if (!this.showing) return
      this.visible = false
      setTimeout(() => {
        this.showing = false
        this.$emit('close')
      }, 300)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-action-sheet {
  &__header {
    position: relative;
    padding: 24rpx 32rpx;
    text-align: center;
  }
  
  &__close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    
    .fu-icon {
      font-family: 'fuIcon';
      font-size: 32rpx;
      color: var(--fu-text-color-secondary);
    }
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__title {
    font-size: 32rpx;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fu-text-color);
  }
  
  &__description {
    margin-top: 8rpx;
    font-size: 24rpx;
    line-height: 1.5;
    color: var(--fu-text-color-secondary);
  }
  
  &__content {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  &__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28rpx 32rpx;
    font-size: 32rpx;
    line-height: 1.5;
    color: var(--fu-text-color);
    background: #fff;
    cursor: pointer;
    border-bottom: 2rpx solid var(--fu-border-color);
    
    &:active {
      background-color: #f2f3f5;
    }
    
    &--disabled {
      color: var(--fu-text-color-disabled);
      cursor: not-allowed;
      
      &:active {
        background-color: #fff;
      }
    }
    
    &--loading {
      cursor: not-allowed;
      
      &:active {
        background-color: #fff;
      }
    }
  }
  
  &__loading {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    margin-right: 12rpx;
    vertical-align: middle;
    animation: fu-rotate 0.8s linear infinite;
    
    &::after {
      content: " ";
      display: block;
      width: 40rpx;
      height: 40rpx;
      border: 4rpx solid var(--fu-text-color);
      border-color: var(--fu-text-color) transparent transparent transparent;
      border-radius: 50%;
    }
  }
  
  &__subname {
    margin-left: 12rpx;
    font-size: 24rpx;
    color: var(--fu-text-color-secondary);
  }
  
  &__gap {
    height: 16rpx;
    background-color: #f7f8fa;
  }
  
  &__cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28rpx 32rpx;
    font-size: 32rpx;
    color: var(--fu-text-color);
    background: #fff;
    cursor: pointer;
    
    &:active {
      background-color: #f2f3f5;
    }
  }
}

@keyframes fu-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 